<template>
    <div>
        <el-form :inline="true" ref="queryRef" :model="queryform" class="demo-form-inline">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="空间分类" prop="classification">
                        <el-select v-model="queryform.classification" placeholder="请选择类别">
                            <el-option label="实验室" value="shanghai"></el-option>
                            <el-option label="图书馆" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="空间名称" prop="spaceName">
                        <el-input v-model="queryform.spaceName" placeholder="请输入空间名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="info" size="medium" @click="onSubmit">查 询</el-button>
                        <el-button type="info" size="medium" @click="emptyForm">重 置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="appraiseTable" style="width: 100%">
            <el-table-column type="index" label="序号">
                <template slot-scope="scope">
                    <span>{{ indexMethod(scope.$index) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="classification" label="所属分类">
            </el-table-column>
            <el-table-column prop="spaceName" label="空间名称">
            </el-table-column>
            <el-table-column prop="bespeakDate" label="预约日期">
            </el-table-column>
            <el-table-column prop="bespeakTime" label="预约时间">
            </el-table-column>
            <el-table-column prop="bespeakNumber" label="预约人数">
            </el-table-column>
            <el-table-column prop="bespeakPerson" label="预约人">
            </el-table-column>
            <el-table-column prop="bespeakServe" label="预约服务">
                <template slot-scope="scope">
                    <el-rate disabled v-model="scope.row.bespeakServe"></el-rate>
                </template>
            </el-table-column>
            <el-table-column prop="spaceEnvironment" label="空间环境">
                <template slot-scope="scope">
                    <el-rate disabled v-model="scope.row.spaceEnvironment"></el-rate>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="detailed(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.showApage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageNum"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
        <el-dialog title="详情" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <div class="spaceAppointment">
                <span>空间信息</span>
                <div class="descriptionsItem">
                    <img src="https://fc3tn.baidu.com/it/u=1023825460,3990576134&fm=202" alt="" srcset="">
                    <el-descriptions :column="2">
                        <el-descriptions-item label="空间名称">{{ appraise.spaceName }}</el-descriptions-item>
                        <el-descriptions-item label="所属分类">{{ appraise.classification }}</el-descriptions-item>
                        <el-descriptions-item label="最少人数">{{ appraise.minbespeakNumber }}</el-descriptions-item>
                        <el-descriptions-item label="最多容纳人数">{{ appraise.maxbespeakNumber }}</el-descriptions-item>
                        <el-descriptions-item label="详细地址">{{ appraise.detailedAddress }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <span style="margin: 10px 0;">评价信息</span>
                <el-descriptions :column="2">
                    <el-descriptions-item label="预约人">{{ appraise.appointmentPerson }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ appraise.contactNumber }}</el-descriptions-item>
                    <el-descriptions-item label="预约服务">
                        <el-rate disabled v-model="appraise.bespeakServe"></el-rate>
                    </el-descriptions-item>
                    <el-descriptions-item label="空间环境">
                        <el-rate disabled v-model="appraise.spaceEnvironment"></el-rate>
                    </el-descriptions-item>
                    <el-descriptions-item label="评价内容">空间整体比较大，光纤比较明亮，非常棒！</el-descriptions-item>
                </el-descriptions>
                <div>

                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            tableData: Array.from({ length: 10 }, (_, index) => ({
                id: index + 1,
                name: 'Tom',
                age: 20
            })),
            queryform: {
                // 空间分类
                classification: '',
                // 空间名称
                spaceName: ''
            },
            appraiseTable: [
                {
                    id: 1,
                    // 预约人
                    appointmentPerson: '胡广生',
                    contactNumber: '13521212121',
                    // 所属分类
                    classification: '图书馆',
                    // 空间名称
                    spaceName: '图书馆1',
                    // 预约日期
                    bespeakDate: '2023-04-21',
                    // 预约时间
                    bespeakTime: '08:00-10:00',
                    // 预约人数
                    bespeakNumber: '5人',
                    // 最少人数
                    minbespeakNumber: '2人',
                    // 最多容纳人数
                    maxbespeakNumber: '5人',
                    // 预约人
                    bespeakPerson: '王强',
                    // 预约服务
                    bespeakServe: 3,
                    // 空间环境
                    spaceEnvironment: 5,
                    detailedAddress: '西安市碑林区长乐西路102'
                },
                {
                    id: 2,
                    appointmentPerson: '胡广生',
                    contactNumber: '13521212121',
                    classification: '图书馆',
                    spaceName: '图书馆1',
                    bespeakDate: '2023-04-21',
                    bespeakTime: '08:00-10:00',
                    bespeakNumber: '5人',
                    minbespeakNumber: '2人',
                    maxbespeakNumber: '5人',
                    bespeakPerson: '王强',
                    bespeakServe: 3,
                    spaceEnvironment: 5,
                    detailedAddress: '西安市碑林区长乐西路102'
                },
                {
                    id: 3,
                    appointmentPerson: '胡广生',
                    contactNumber: '13521212121',
                    classification: '图书馆',
                    spaceName: '图书馆1',
                    bespeakDate: '2023-04-21',
                    bespeakTime: '08:00-10:00',
                    bespeakNumber: '5人',
                    minbespeakNumber: '2人',
                    maxbespeakNumber: '5人',
                    bespeakPerson: '王强',
                    bespeakServe: 3,
                    spaceEnvironment: 5,
                    detailedAddress: '西安市碑林区长乐西路102'
                },
                {
                    id: 4,
                    appointmentPerson: '胡广生',
                    contactNumber: '13521212121',
                    classification: '图书馆',
                    spaceName: '图书馆1',
                    bespeakDate: '2023-04-21',
                    bespeakTime: '08:00-10:00',
                    bespeakNumber: '5人',
                    minbespeakNumber: '2人',
                    maxbespeakNumber: '5人',
                    bespeakPerson: '王强',
                    bespeakServe: 3,
                    spaceEnvironment: 5,
                    detailedAddress: '西安市碑林区长乐西路102'
                },
            ],
            // 分页
            pagination: {
                // 显示第几页
                showApage: 1,
                // 总条数
                total: 50,
                // 每页显示多少条
                pageNum: 10,
            },
            appraise: ''
        }
    },
    methods: {

        indexMethod(index) {
            return index < 10 ? '0' + (index + 1) : index + 1;
        },
        onSubmit() {
            console.log('submit!');
        },
        // 重置表单
        emptyForm() {
            this.$refs.queryRef.resetFields()
        },
        // 点击查看详情
        detailed(e) {
            this.dialogVisible = true
            this.appraise = e
        },
        // 每页条数
        handleSizeChange(e) {
            this.pagination.pageNum = e
            // 重新掉一下数据
        },
        // 当前第几页
        handleCurrentChange(val) {
            this.pagination.showApage = val
            // 重新掉一下数据
        },
        handleClose(done) {
            this.dialogVisible = false
        }
    },
    filters: {
        formatIndex: function (value) {
            return this.indexMethod(value - 1);
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
    padding: 0 30px;
}

.spaceAppointment {
    margin-top: 10px;

    >span {
        font-size: 16px;
        display: inline-block;
        position: relative;


        &::before {
            position: absolute;
            top: 2px;
            left: -10px;
            content: '';
            width: 4px;
            height: 20px;
            background-color: #cfcfcf;
        }
    }

    .descriptionsItem {
        margin-top: 10px;
        display: flex;
        align-items: center;

        img {
            width: 92px;
            height: 92px;
            margin-right: 15px;
            // margin-top: 2px;
        }
    }
}
</style>